<template>
  <div class="view-echarts-category">
    <a-row>
      <a-col :span="24" class="view-echarts-category-col">
        <a-card title="饼形图" :bordered="false">
          <a-alert message="以下所有的 demo皆引用echarts 官方示例" type="success" />
          <br />
          文档地址&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a target="_blank" href="">https://www.isqqw.com/</a>
        </a-card>
      </a-col>
      <a-col :span="8" class="view-echarts-category-col" v-for="item in barList" :key="item.id">
        <a-card :title="item.title" :bordered="false">
          <div :id="item.id" class="view-echarts-category-basis"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup name="Pie">
import { basicPieOptions, DoughnutPieOptions, annularPieOptions, pieOption, proportionPieOptions, qwlPieChartOption } from './index'

import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart, CustomChart, GaugeChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, LegendComponent, TransformComponent, ToolboxComponent, PolarComponent } from 'echarts/components'

import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([TitleComponent, LegendComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, ToolboxComponent, BarChart, LineChart, LabelLayout, UniversalTransition, CanvasRenderer, PieChart, PolarComponent, CustomChart, GaugeChart])

const barList = ref([
  { title: '基础饼图', id: 'basicPie' },
  { title: '圆角环形图', id: 'DoughnutPie' },
  { title: '环形图', id: 'annularPie' },
  { title: '饼图', id: 'Pie' },
  { title: '比例图', id: 'proportionPie' },
  { title: 'qwl-仪表盘', id: 'qwlPie' }
])

/**
 * setup
 * @param {*}
 * @returns
 */

let handleResize: (() => void) | null = null

//  基础饼图
let basicPieChart: echarts.ECharts | null = null

//  圆角环形图
let DoughnutPieChart: echarts.ECharts | null = null

//  环形图
let annularPieChart: echarts.ECharts | null = null

// 3D圆柱
let pieChart: echarts.ECharts | null = null

// 比例图
let proportionPieChart: echarts.ECharts | null = null

// 仪表盘
let qwlPieChart: echarts.ECharts | null = null

onMounted(() => {
  basicPieChart = echarts.init(document.getElementById('basicPie')!)

  annularPieChart = echarts.init(document.getElementById('annularPie')!)

  pieChart = echarts.init(document.getElementById('Pie')!)

  proportionPieChart = echarts.init(document.getElementById('proportionPie')!)

  qwlPieChart = echarts.init(document.getElementById('qwlPie')!)

  DoughnutPieChart = echarts.init(document.getElementById('DoughnutPie')!)

  handleResize = () => {
    basicPieChart?.resize()
    DoughnutPieChart?.resize()
    annularPieChart?.resize()
    pieChart?.resize()
    proportionPieChart?.resize()
    qwlPieChart?.resize()
  }

  // 基础饼图
  basicPieChart?.setOption(basicPieOptions)
  // 圆角环形图
  DoughnutPieChart?.setOption(DoughnutPieOptions)
  // 环形图
  annularPieChart?.setOption(annularPieOptions)
  // 3D圆柱
  pieChart?.setOption(pieOption)
  // 比例图
  proportionPieChart?.setOption(proportionPieOptions)
  // 仪表盘
  qwlPieChart?.setOption(qwlPieChartOption)

  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize!)
  basicPieChart?.dispose()
  DoughnutPieChart?.dispose()
  annularPieChart?.dispose()
  proportionPieChart?.dispose()
  qwlPieChart?.dispose()
  pieChart?.dispose()
  basicPieChart = null
  DoughnutPieChart = null
  annularPieChart = null
  proportionPieChart = null
  qwlPieChart = null
  pieChart = null
  handleResize = null
})
</script>

<style lang="less">
@import '../index.less';
</style>
